<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function () {
		$("#pageId").load("doPageUI", doGetObjects);
		//注册查询/删除按钮点击事件
		$(".input-group-btn").on("click", ".btn-search", doQueryObjects)
				             .on("click", ".btn-delete", doDeleteObjects);

		//点击thead中的checkbox事件
		$("#checkAll").change(doChangeTBodyCheckBox);
		//点击tbodu中的checkbox修改thead中的checkbox事件注册
		$("#tbodyId").on("change", ".cBox", doChangeTheadCheckBox);

	});
	//点击tbodu中的checkbox修改thead中的checkbox事件注册
	function doChangeTheadCheckBox() {
		var flag = true;
		//获取tbody中的checkbox
		$("#tbodyId input[type='checkbox']").each(function () {//遍历tbodu中所有的checkbox
			//将多有的checkbox的checked属性进行逻辑与运算，若均为true则thead中的checkbox为选中，否则为不选中
			//可以通过定义flag标识进行操作
			flag = flag && $(this).prop("checked");//此处将tbody中所有的checkbox的checked属性和flag做了逻辑与运算。
		});
		$("#checkAll").prop("checked", flag);

	}
	//点击thead中的checkbox事件
	function doChangeTBodyCheckBox() {
		//获取checkAll对象的checked属性的值
		let theadCheckBoxState = $("#checkAll").prop("checked");
		//将checked的值复制到tBody中checkbox中
		//1.获取tbody中的checkbox
		$("#tbodyId input[type='checkbox']").prop("checked", theadCheckBoxState);
		//只这样设置是，点击上一页或下一页，tbodu中的数据刷新后，tbody中的checkbox发生变化，thead中的tbody状态不发生变化，
		//所以要在doGetObjects方法中加一句代码，每次刷新都让thead中的checkbox置为false

	}

	//删除业务中的获取参数函数
	function doGetCheckedIds() {
		//定义数组用于存储获得的id
		var array = [];
		//获取对应的对象
		$("#tbodyId input[type='checkbox']")//获取所有checkbox
				.each(function () {//遍历获得的checkbox
					if ($(this).prop("checked")) {
						array.push($(this).val());
					}
				});
		return array;
	}
	//实现删除按钮业务
	function doDeleteObjects() {
		// debugger;
		//获取参数
		var ids = doGetCheckedIds();
		if(ids.length==0){
			alert("请选中要删除的内容");
			return;
		}
		var params = {"ids": ids.toString()}
		if(!confirm("确定要删除吗？"))
			return;
		//定义URL
		var url = "log/deleteObjects";
		//定义ajax函数
		$.getJSON(url, params, function (result) {
			if (result.state == 1) {
				alert(result.message);
				//删除数据后直接调用查询数据刷新的话，如果满足页面为最后一页，页面中的内容全选，页码大于1
				//那么删除后在调用doGetObjects查询的话，则刷新后的页面没数据，当前页码数大于总页码数
				//所以刷新时需要判断当前条件是否满足上述3个条件，
				//满足的话需要将当前页减一刷新
				// doGetObjects();
				doRefreshAfterDelete();
			}else{
				alert(result.message);
			}
		});

	}

	/**
	 * 删除数据后的刷新
	 *
	 */
	function doRefreshAfterDelete() {
		//获取页码值、总页数、checkAll状态
		let pageCurrent = $("#pageId").data("pageCurrent");
		let pageCount = $("#pageId").data("pageCount");
		let checkAllState = $("#checkAll").prop("checked");
		//判断上述三个条件是否满足既定条件
		if (checkAllState && pageCount > 1 && pageCurrent == pageCount) {
			pageCurrent--;
			$("#pageId").data("pageCurrent", pageCurrent);
		}
		//然后再执行查询语句
		doGetObjects();
	}

	//查询按钮
	function doQueryObjects() {
		//将pageCurrent赋值为1，是因为不管在第几页开始查询，执行时都从第一页查询。
		$("#pageId").data("pageCurrent", 1);
		//执行查询操作
		doGetObjects();
	}

	function doGetObjects() {
		//每次查询都将thead中的checkbox置为false
		$("#checkAll").prop("checked", false);
		//定义参数
		//获取从page.html中改变后的pageCurrent值
		let pageCurrent = $("#pageId").data("pageCurrent");
		//第一次点击日志管理时，pageCurrent为空，所以要赋值为1
		if(!pageCurrent)
			pageCurrent = 1;
		var params = {"pageCurrent": pageCurrent}
		//获取查询文本框中的数据
		let username = $("#searchNameId").val();
		//判断username是否有值，如果有值将username添加到param中
		if (username)
			params.username = username;
		//定义url
		var url = "log/findPageObjects";
		//定义ajax函数
		$.getJSON(url, params, function (result) {
			//处理回掉函数中获得的参数
			// console.log("JsonResult", result);
			doHandleResponseResult(result);
		});

		function doHandleResponseResult(result) {
			if (result.state == 1) {
				//如果获得的数据状态为1，则证明数据正常，可以正常进行
				//1.更新tbody内部的数据
				doSetTableBodyRows(result.data.records);
				//2。更新页面page.html中的数据
				doSetPagination(result.data);
			} else {
				//如果state不为1使用alter设置的话，当数据只剩下一页，然后被全选删除时，
				// 全选--点击删除确定删除后程序会再次执行查询数据操作，则会弹窗提示出错，
				//而不是点击全选删除，确定后页面直接显示无数据，所以不能用alert
				// alert(result.message);
				doSetQueryErrors(result.message);
			}
		}
		function doSetQueryErrors(message) {
			//获取要显示"无数据"的对象
			$("#tbodyId").html("<tr><td colspan='7'>"+message+"</td></tr>")
		}

		//更新tbody中的数据
		function doSetTableBodyRows(records) {
			//获取ID为tbody的对象,并清空内容
			let $tbodyId = $("#tbodyId");
			$tbodyId.empty();
			//迭代records对象，
			for (const row of records) {
				//创建tr对象
				let $tr = $("<tr></tr>");
				//创建td对象
				let tds = doCreateTds(row);
				//将tds添加到tr中
				$tr.append(tds);
				//将tr添加到tbody中
				$tbodyId.append($tr);
			}
		}

		function doCreateTds(row) {
			let tds = "<td><input type='checkbox' class='cBox' name='cItem' value='" + row.id + "'/></td>" +
					"<td>" + row.username + "</td>" +
					"<td>" + row.operation + "</td>" +
					"<td>" + row.method + "</td>" +
					"<td>" + row.params + "</td>" +
					"<td>" + row.ip + "</td>" +
					"<td>" + row.time + "</td>";
			return tds;
		}
	}
</script>







